<template>
  <el-upload
    class="avatar-uploader"
    :action="action"
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :on-success="uploadAvatarSuccess"
  >
    <img :src="url" alt="" :style="{ maxWidth: imgMaxWidth + 'px' }" />
  </el-upload>
</template>

<script>
export default {
  // name:"UploadImg"
  props: {
    url: String,
    action: String, // 上传的地址
    maxSize: {
      type: Number,
      default: 5, //2M
    },
    imgMaxWidth: {
      type: [Number, String],
      default: "auto",
    },
  },

  methods: {
    beforeAvatarUpload() {},
    uploadAvatarSuccess(res) {
      // console.log(res);
      if (res.code === 1) {
        this.$message({
          message: `上传失败，图片尺寸不能超过 ${this.imgMaxWidth}`,
          type: "warning",
        });
      } else {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        /* 将上传图片的url发送给父组件 */
        this.$emit("imgUploadedUrl", {
          imgUrl: res.data.url,
        });
      }
    },
  },
};
</script>

<style>
</style>